/**
 * 登陆页
 */
import React from 'react';
import '../css/login.css';
import md5 from 'md5';
import Cookie from 'js-cookie';
import Title from './Home/mainList/Title';
import {
    Form,
    FormGroup,
    Col,
    FormControl,
    Button,
    Checkbox,
    Overlay,
    Tooltip,
    FormItem
} from '@share/shareui';
// var clientPath =  require('/config/constant.json');

var Base64 = require('js-base64').Base64;

/**
 * 名字必须和export default Demo统一,并且大写
 */
class Login extends React.Component{



    /*构造器初始化*/
    constructor() {
        super();
        this.state = {
            show:false,
            passwordtemp:"",
            username:"",
            password:"",
            checked:false,
        }
        // console.log(clientPath.clientPath);
    }

    /*组件渲染前执行*/
    componentWillMount(){
        let url = "/sharemeeting/login/getMeeting.do";
        /*异步请求*/
        fetch(url,{
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            body: JSON.stringify({})
        })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                if(responseData.status === true){
                    if(window.confirm("检查到已有账号登陆是否直接登陆") === true){
                        window.location.href="#/index";
                    }
                }
            }).catch((error)=> {
            window.location.href="#/";
        })
    }

    componentDidMount(){
        let password = Cookie.get("_pwd_");
        if(password !== "" && password !== null && typeof(password) !== "undefined"){
            this.state.username = Cookie.get("username");
            this.state.password = password;
            this.state.passwordtemp = "********";
            this.refs.check.setAttribute("checked","");
            this.setState({checked:true});
        }
        let obj = this.refs.commit;

        document.onkeypress = function (event) {
            let e = event || window.event;
            if (e && e.keyCode === 13) { //回车键的键值为13
                obj.props.onClick();//调用登录按钮的登录事件
            }
        };
    }

    /*表单提交*/
    submitHandler(event){
        console.log(this.state.checked);
        if(this.state.checked){
            Cookie.set('username',this.state.username,{expires:7,path:'/'});
            Cookie.set('_pwd_',this.state.password,{expires:7,path:'/'});
        }else{
            Cookie.remove('_pwd_');
        }
        // event.preventDefault();//阻止表单默认提交
        if(!this.state.username || !this.state.password){
            alert("文本框不能为空");
        }else{
            let url = "/sharemeeting/login/checkLogin.do";
            var params = {
                username:this.state.username,
                password:this.state.password,
            }
            /*异步请求*/
            fetch(url,{
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                credentials: 'include',
                body: JSON.stringify(params)
            })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                if(responseData.status === false){
                    alert(responseData.msg);
                }else{
                    window.location.href = "#/index";
                }
            }).catch((error)=> {
                alert('您和服务器失联了，请重试');
            })
        }
    }

    usernameChange(e){
        var value = e.target.value;
        this.setState({username:value,password:"",passwordtemp:""});
        if(this.clocker === null){
            this.clocker = setTimeout(()=>{
                if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.state.username))){
                    this.setState({show:true});
                }else{
                    this.setState({show:false});
                }},1000);
        }else{
            clearTimeout(this.clocker);//连续输入时重新计时，没有输入时，1秒后执行搜索函数。
            this.clocker = setTimeout(()=>{
                if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.state.username))){
                    this.setState({show:true});
                }else{
                    this.setState({show:false});
                }},1000);
        }
        if(value===""){
            this.setState({show:false});
        }
    }


    /*渲染页面*/
    render(){
        const sharedProps = {
            show: this.state.show,
            container: this,
            target:this.refs.target
        };
        return (
            <div className="all">
                <div className="login_panel_outer">
                    <div className="login_panel_inner">
                        <h2>畅享会议纪要管理系统</h2>
                        <Form>
                            <div className="form-option info-list-show ">
                                <FormItem wPercent100>
                                    <label>账号</label>
                                    <FormGroup controlId="formHorizontalEmail">
                                        <FormControl ref="target" type="text" value={this.state.username} placeholder="手机号" onChange={this.usernameChange.bind(this)}/>
                                        <Overlay {...sharedProps} placement="right">
                                            <Tooltip id="overload-left">请输入正确的手机号码</Tooltip>
                                        </Overlay>
                                    </FormGroup>
                                </FormItem>
                                <FormItem wPercent100>
                                    <label>密码</label>
                                    <FormControl type="password" value={this.state.passwordtemp} placeholder="密码" onChange={(e)=>{
                                        this.state.passwordtemp = e.target.value;
                                        this.state.password = Base64.encode(md5(this.state.passwordtemp));
                                        this.setState({password:this.state.password})
                                    }}/>
                                </FormItem>
                            </div>
                            <input type="checkbox" ref="check" onChange={(e)=>{
                                this.state.checked = e.target.checked;
                            }}/>记住我
                            <div className="form-button">
                                <Button onClick={this.submitHandler.bind(this)} ref="commit" bsSize="large" block>
                                    登录
                                </Button>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        )
    }
}
export default Login

